后端返回二进制图片前端乱码解决方案 |
您所在的位置:网站首页 › postman 下载多张图片 › 后端返回二进制图片前端乱码解决方案 |
今天有小伙伴发现一个问题,后端返回一张图片,但是前端打印结果是�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u这种unicode乱码,postman和浏览器调试返回都能看到图片 打印结果如图所示: 简单测试了一下,发现出现这种情况是因为后端图片没有转码成base64直接用文件流返回,就像这样 router.get('/test', (req, res) => { fs.readFile('./test.png', 'binary', function (err, file) { if (err) { console.log(err) return } else { res.write(file, 'binary') res.end() } }) })解决方案一: 后端把图片转码成base64再发送过来 router.get('/test', (req, res) => { fs.readFile('./test.png', 'binary', function (err, file) { if (err) { console.log(err) return } else { res.send({ status: 0, message: '调取成功', data: Buffer.from(file, 'binary').toString('base64'), }) } }) })请求结果如图 : 解决方案二 添加 {responseType: ‘arraybuffer’} 请求头,获取ArrayBuffer类型数据,再转码成base64 axios.get('http://localhost:801/my/test', { responseType: 'arraybuffer' }).then(res => { console.log(res) // buffer转译 console.log(btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64'); })请求结果如图 : 解决方案三 跟前面方法二一样 添加 {responseType: ‘blob’} 请求头,获取blob类型数据 axios.get('http://localhost:801/my/test', { responseType: 'blob' }).then(res => { console.log( res ) const blob = new Blob([res.data]) var reader = new window.FileReader(); reader.readAsDataURL(blob); reader.onloadend = function () { document.querySelector('#img').src = reader.result } })请求结果如图 : 前端小伙伴用以上方法试了半天还是不行, 最后发现是请求头没配上-,- |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |